<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Login Page</title>
    </h:head>
    <h:body>
        <br/>
        <h1 align="center" style="font-family:calibri; color: #000066"> Welcome to MeteoCal &nbsp;
            <img src="./images/logo.png" style="width:55px;height:50px"/></h1>
        
        <h:form id="loginform">
            <br/><br/>
            <div align="center" >
            <p:panel header="Login Form" style="width:400px; height:200px; background-color: aliceblue"> 
                <div align="center">
                <h:panelGrid columns="2" cellspacing="5" cellpadding="5">
                    <p:outputLabel for="username" value="Email" 
                          style="font-family:calibri;font-size:20px;font-weight:bold;margin-left: 10px;color:#000066;"/>
                    <p:inputText id="username" value="#{loginBean.username}" 
                                 required="true" />
                    <p:outputLabel for="pass" value="Password" 
                          style="font-family:calibri;font-size:20px;font-weight:bold;margin-left: 10px;color:#000066;"/>
                    <p:password id="pass" value="#{loginBean.password}" 
                                required="true" />
                </h:panelGrid>
                </div>
                
                <div align="right">
                <p:commandButton id="submit" action="#{loginBean.login()}" value="Login" 
                                 style="font-family:calibri;color:#000066;width:140px;height:40px;font-size:20px;margin-right:17px"
                                 ajax="true" update="@all"/>
                </div>
            </p:panel>
            </div>
            <br/>
            <div align="center"> <h:messages  layout="table" style="color: red"/> </div>
        </h:form>
  
        <h3 align="center" style="font-family:calibri; color: #000066">  
           Not registered yet? <p:link outcome="register" value="Register now"/> 
        </h3>     
    </h:body>
</html>

